<!DOCTYPE HTML>
<html>
    <head>
        <title>CSS Regions: onkeydown and onkeyup events inside multiple regions using Tab key in forms</title>
        <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
        <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-19-2013 -->
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#relation-to-document-events">
        <meta name="assert" content="CSS regions module does not alter the normal processing of events in the document
         tree. Therefore, onkeydown and onkeyup events inside multiple named flows should be raised when the Tab key is
         pressed and released.">
        <meta name="flags" content="dom interact">
        <link href="support/css/regions-keyboard.css" rel="stylesheet" type="text/css">
        <link href="/resources/testharness.css" rel="stylesheet" type="text/css">
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <script src="support/js/regions-keyboard-events-test-helper.js"></script>
    </head>
    <body>
        <p id="msg">Press the Tab key three times.</p>
        <div id="content">
            <form id="my-form">
            <div class="block">
                <input type="text" id="textfield-inside1" size="10" autofocus>
            </div>
            <div class="block">
                <input type="text" id="textfield-inside2" size="10">
            </div>
            <div id="target-block" class="block">
                <textarea id="textarea-inside" rows="3" cols="10"></textarea>
            </div>
             </form>
        </div>
        <div class="region"></div>
        <div class="region"></div>
        <div class="region"></div>
        <br/>
        <div id="outside-region">This div is outside the region
            <form id="form-outside">
                <input type="text" id="textfield-outside" size="10">
                <input type="button" id="button-outside" value="Button">
            </form>
        </div>
        <div id="log"></div>
    </body>
    <script type="text/javascript">

        if(getLeftPosition("target-block") !== 0) {

            var test1 = async_test("onkeydown event fired in textfield1 inside region", {timeout: testTimeout});
            test1.step(function () {
                var testTarget = document.getElementById("textfield-inside1");
                testTarget.onkeydown = test1.step_func(function (evt) {

                    /* Verify the target outside the region has the correct ID */
                    test(function() {
                        assert_equals(evt.target.id, "textfield-inside1");
                    }, "Textfield1 inside region has the correct ID");

                    /* Verify the textfield received focus from tab key */
                    test(function() {
                        assert_equals(document.activeElement.id, "textfield-inside1");
                    }, "Textfield1 inside region received focus");

                    test1.done();
                });
            });

            var test2 = async_test("onkeyup event fired in textfield2 inside region", {timeout: testTimeout});
            test2.step(function () {
                var testTarget = document.getElementById("textfield-inside2");
                testTarget.onkeyup = test2.step_func(function (evt) {
                    /* Log assertion that the event got fired */
                    assert_true(true);

                    test2.done();
                });
            });

            var test3 = async_test("onkeydown event fired in textfield2 inside region", {timeout: testTimeout});
            test3.step( function() {
                var testTarget = document.getElementById("textfield-inside2");
                testTarget.onkeydown = test3.step_func(function (evt) {

                    /* Verify the target outside the region has the correct ID */
                    test(function () {
                        assert_equals(evt.target.id, "textfield-inside2");
                    }, "Textfield2 inside region has the correct ID");

                    /* Verify the textfield received focus from tab key */
                    test(function () {
                        assert_equals(document.activeElement.id, "textfield-inside2");
                    }, "Textfield2 inside region received focus");

                    test3.done();
                });
            });

            var test4 = async_test("onkeyup event fired in textarea inside region", {timeout: testTimeout});
            test4.step( function() {
                var testTarget = document.getElementById("textarea-inside");
                testTarget.onkeyup = test4.step_func(function (evt) {

                    /* Verify the textarea received focus from tab key */
                    test(function () {
                        assert_equals(document.activeElement.id, "textarea-inside");
                    }, "textarea inside region received focus");

                    test4.done();
                });
            });

            var test5 = async_test("onkeydown event fired in textarea inside region", {timeout: testTimeout});
            test5.step( function() {
                var testTarget = document.getElementById("textarea-inside");
                testTarget.onkeydown = test5.step_func(function (evt) {

                    /* Verify the textarea inside the region has the correct ID */
                    test(function () {
                        assert_equals(evt.target.id, "textarea-inside");
                    }, "textarea inside region has the correct ID");

                    test5.done();
                });
            });

            tabKeyPresses(3);
            completionCallback();

        } //end of getLeftPosition test
        else {
            test(function () {
                assert_true(false);
            }, "Regions are not enabled");
        }
    </script>
</html>